<script setup>
import Details1 from "@/1-home/details1.vue";
</script>
<script>
import details from "@/1-home/details1.vue";
import details1 from "@/1-home/details1.vue";
import details2 from "@/1-home/details2.vue";

export default {
  components: {
    details,
    details1,
    details2,
  },
  props: {
    text: String,
    paramsList: Array
  },
  computed: {
    paramsList() {
      return this.paramsList;
    }
  }
}
</script>
<template>
  <!--  {{paramsList}}-->
  <div style="display: flex">
    <div class="body">
      <div class="body-wrapper">
        <div class="body-title">
          <div class="body-left">
            <div class="body-left-text">
              {{ text }}
            </div>
          </div>
          <div class="body-right">
            <div class="body-right-text">
              查看全部
            </div>
          </div>
        </div>
        <div class="body-body">
          <div class="left">
            <template v-for="(item,index) in paramsList" :key="index">
              <div style="display:flex" @click="$router.push('/introduce?id='+item.id)">
                <details1 v-if="index === 0" :t1=item.name :t2=item.address :t3=item.time :t4=item.price
                          :t5=item.photo></details1>
              </div>
            </template>

          </div>
          <div class="right">
            <div class="shang">
              <el-row>
                <el-col :span="8">
                  <div class="d">
                    <template v-for="(item,index) in paramsList" :key="index">
                      <div style="display:flex" @click="$router.push('/introduce?id='+item.id)">
                        <details2 v-if="index === 1" :t1=item.name :t2=item.address :t3=item.time :t4=item.price
                                  :t5=item.photo></details2>
                      </div>
                    </template>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="d">
                    <template v-for="(item,index) in paramsList" :key="index">
                      <div style="display:flex" @click="$router.push('/introduce?id='+item.id)">
                        <details2 v-if="index === 2" :t1=item.name :t2=item.address :t3=item.time :t4=item.price
                                  :t5=item.photo></details2>
                      </div>
                    </template>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="d">
                    <template v-for="(item,index) in paramsList" :key="index">
                      <div style="display:flex" @click="$router.push('/introduce?id='+item.id)">
                        <details2 v-if="index === 3" :t1=item.name :t2=item.address :t3=item.time :t4=item.price
                                  :t5=item.photo></details2>
                      </div>
                    </template>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="xia">
              <el-row>
                <el-col :span="8">
                  <div class="d">
                    <template v-for="(item,index) in paramsList" :key="index">
                      <div style="display:flex" @click="$router.push('/introduce?id='+item.id)">
                        <details2 v-if="index === 4" :t1=item.name :t2=item.address :t3=item.time :t4=item.price
                                  :t5=item.photo></details2>
                      </div>
                    </template>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="d">
                    <template v-for="(item,index) in paramsList" :key="index">
                      <div style="display:flex" @click="$router.push('/introduce?id='+item.id)">
                        <details2 v-if="index === 5" :t1=item.name :t2=item.address :t3=item.time :t4=item.price
                                  :t5=item.photo></details2>
                      </div>
                    </template>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="d">
                    <template v-for="(item,index) in paramsList" :key="index">
                      <div style="display:flex" @click="$router.push('/introduce?id='+item.id)">
                        <details2 v-if="index === 6" :t1=item.name :t2=item.address :t3=item.time :t4=item.price
                                  :t5=item.photo></details2>
                      </div>
                    </template>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<style scoped lang="scss">
.body {
  width: 1200px;
  height: 450px;
  margin-top: 20px;
  //background: green;
  border: 1px solid #EBEBEB;

  .body-wrapper {
    width: 95%;
    height: 100%;
    margin: 0 auto;
    //background-color: pink;
    .body-title {
      width: 100%;
      height: 80px;
      display: flex;
      //background-color: #222;
      justify-content: space-between;

      .body-left {
        margin-top: 20px;
        font-size: 24px;
      }

      .body-right {
        font-size: 14px;
        margin-top: 30px;
        //color: #333;
      }
    }
  }

  .body-body {
    width: 100%;
    height: 370px;
    //background: #2c3e50;
    display: flex;
  }
}


.left {
  display: flex;
  width: 270px;
  height: 100%;
  //background: blue;
  //z-index: 1;
}

.right {
  width: 870px;
  height: 100%;
  //background: red;
}

.shang {
  width: 100%;
  height: 185px;
  //background: yellow;
}

.xia {
  width: 100%;
  height: 185px;
  //background: green;
}

.d {
  height: 185px;
  display: flex;
}

a {
  text-decoration: none;
  display: flex;
}
</style>